<template>
    <div class="menu-box-page" :style="{ transform: firstShow && show ? 'translateX(0)' : null }">
        <div class="title">
            <span class="title-name">{{ $t('message.text.menu') }}</span>
            <svg class="close-icon" @click="closeKnowInfo">
                <use v-bind:xlink:href="`#${isEditor ? 'keowledge-shouqi' : 'keowledge-shousuo'}`"></use>
            </svg>
        </div>
        <div class="menu-list-body" id="menu-list-body">
            <el-scrollbar ref="menuListScrollRef" @scroll="menuScroll">
                <el-tree ref="menuTreeRef" :data="menuList" node-key="id" @node-click="handleNodeClick"
                    :default-expand-all="true" :expand-on-click-node="false" @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse">
                    <template #default="{ node, data }">
                        <div class="menu-tree-node" v-tooltip-auto-show :id="`menu-${data.id}`">
                            <el-tooltip :content="data.label" effect="light">
                                <div class="node-label">{{ data.label }}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-tree>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    nextTick,
    getCurrentInstance
} from 'vue'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();
interface Tree {
    label: string,
    children?: Tree[]
}
const emit = defineEmits(["close", "clickScroll"])
const props = defineProps({
    menuList: {
        type: Array,
        default: []
    },
    show: {
        type: Boolean,
        defalut: false
    },
    isEditor: {
        type: Boolean,
        default: false
    }
})
const firstShow = ref(false)
const menuListScrollRef = ref()
const currentKey = ref()
const fixedCurrentKey = ref()
const menuTreeRef = ref()
const menuScrollTop = ref(0)
watch(() => props.show, (newV) => {
    if (newV) {
        init()
    } else {
        firstShow.value = newV
    }
})
watch(() => props.menuList, (newV) => {
    //    console.log(newV)
})
onMounted(() => {
    init()
})
function init() {
    menuScrollTop.value = 0
    nextTick(() => {
        firstShow.value = true
        menuListScrollRef.value.update()
    })
}
function menuScroll({ scrollTop, scrollLeft }) {
    menuScrollTop.value = scrollTop
}
function closeKnowInfo() {
    emit('close')
}
function handleNodeClick(data: Tree) {
    setCurrentKey(data.value)
    emit("clickScroll", data)
}
function setCurrentKey(val: string) {
    currentKey.value = val
    menuTreeRef.value.setCurrentKey(currentKey.value)
    const currentNodeKey = 'menu-' + val
    const offsetTop = document.getElementById(currentNodeKey)?.parentNode.offsetTop
    const domHeight = document.getElementById(currentNodeKey)?.parentNode.clientHeight
    const clientHeight = document.getElementById("menu-list-body").clientHeight
    const domOffsetTop = offsetTop - menuScrollTop.value
    if (domOffsetTop < 0 || domOffsetTop >= clientHeight) {
        let endScrollTop = 0
        if (domOffsetTop >= clientHeight) {
            endScrollTop = domOffsetTop - clientHeight + domHeight + menuScrollTop.value
        }
        if (domOffsetTop < 0) {
            endScrollTop = domOffsetTop + menuScrollTop.value
        }
        menuListScrollRef.value.setScrollTop(endScrollTop)
    }
}
// 节点展开
function nodeExpand(data, node, event) {
    let isChildren = false
    data.children.forEach(item => {
        if (item.value == currentKey.value) {
            isChildren = true
        }
    })
    if (isChildren) {
        fixedCurrentKey.value = null
        menuTreeRef.value.setCurrentKey(currentKey.value)
    }
}
// 节点收起
function nodeCollapse(data, node, event) {
    let isChildren = false
    data.children.forEach(item => {
        if (item.value == currentKey.value) {
            isChildren = true
        }
    })
    if (isChildren) {
        fixedCurrentKey.value = data.value
        menuTreeRef.value.setCurrentKey(fixedCurrentKey.value)
    }
}
defineExpose({
    setCurrentKey
})
</script>
<style lang="scss" scoped>
.menu-box-page {
    width: 268px;
    height: 100%;
    transition: transform .2s;
    box-sizing: border-box;
    border-left: 1px solid #EEEFF0;
    background-color: #fff;
    transform: translateX(100%);

    .title {
        padding-left: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 24px;

        .title-name {
            font-size: 14px;
            color: #363b4c;
        }

        .close-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .menu-list-body {
        height: calc(100% - 20px);
    }

    .el-tree {
        padding-right: 8px;
        padding-left: 8px;

        ::v-deep(.el-tree-node__content) {
            height: 34px;
            border-radius: 4px;

            &:hover {
                background: #eeeff0 !important;
            }
        }

        ::v-deep(.el-tree-node__content::before) {
            position: absolute;
            content: '';
            width: 2px;
            height: 34px;
            left: 0px;
            background: transparent;
        }

        ::v-deep(.el-tree-node:focus > .el-tree-node__content) {
            background-color: transparent;
        }

        ::v-deep(.is-current>.el-tree-node__content) {
            background-color: transparent;
            color: #1E6FFF !important;

            >.el-icon {
                color: #1E6FFF !important;
            }

            &::before {
                background: #1E6FFF !important;
            }
        }

        ::v-deep(.menu-tree-node) {
            // height: 34px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding-right: 16px;

            .node-label {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            span {
                font-size: 14px;
                color: #363b4D;
            }
        }
    }
}

.menu-box-page-no-back {
    background-color: #F5F6F7 !important;

    .title {
        height: 50px;
        // padding: 0px;
        // margin: 0px 24px;
        border-bottom: 1px solid #EEEFF0;
    }

    .el-tree {
        background-color: #F5F6F7 !important;
    }
}
</style>